<% layout('layout/layout') %>
<% block('header').append(`<style>
.order_goods_table.table > thead > tr > th {
    border-bottom:1px dashed #e5e5e5;
}
.order_goods_table.table > tbody > tr > td{
    border-top:none;
}
.text-label {
  text-align:right;
  width: 80px;
  display: inline-block;
}
.traces_ul{
    list-style: none;
    padding:0;
}
.traces_ul li {
    padding:5px;

}
.traces_ul li + li {
    border-top:1px solid #f0f0f0;
}
</style>`) %>
<div class="container">
    <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li><a href="/account/index">用户中心</a></li>
        <li><a href="/account/orderManage">订单管理</a></li>
        <li class="active"><%= title %></li>
    </ol>
    <div class="row">
        <div class="col-md-3 col-xs-3">
            <% include ../navbar/accountLeftNav.ejs %>
        </div>
        <div class="col-md-9 col-xs-9">
            <div class="panel panel-default " >
                <div class="panel-heading">订单号：<%=order.orderId %>
                    <span class="padding-left20">下单时间：<%=order.create_at_ago() %></span>
                </div>
                <div class="panel-body " >
                    <div class="row">
                        <div class="col-md-8">
                            <p><span class="text-muted text-label">收 件 人：</span><%=order.address.name %></p>
                            <p><span class="text-muted text-label">联系方式：</span><%=order.address.mobile %></p>
                            <p><span class="text-muted text-label">收货地址：</span><%=order.address.place %></p>
                        </div>
                        <div class="col-md-4 text-right">
                            <div>
                                <p><span class="text-muted text-label">商品合计：</span><span class="text-label">￥<%=order.totalPrice%></span></p>
                                <p><span class="text-muted text-label">运费：</span><span class="text-label">￥<%=order.feePrice %></span></p>
                                <% if(order.offerType && order.offerPrice>0){ %>
                                <p><span class="text-muted text-label">优惠：</span><span class="text-label text-success fs12">减免￥<%=order.offerPrice %></span></p>
                                <% } %>
                            </div>
                           <div class="padding-top" style="border-top:1px dashed #e3e3e3;">
                               <p><span class="text-muted text-label">应付：</span><span class="text-label text-danger fs20">￥<%=order.needPrice %></span></p>

                               <% if(order.orderStatus===10){ %>
                               <a class="btn btn-primary"  href="/order/pay/<%=order._id %>"  style="width:100px;">付款</a>
                               <% } %>
                               <% if(order.orderStatus >= 20 ) { %>
                                 <p style="border-top:1px dashed #e3e3e3;"><span class="text-muted text-label">实付：</span><span class="text-label text-success fs20">￥<%=order.realPrice %></span></p>
                               <% }%>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default " style="height:auto;">
                <div class="panel-heading">商品
                    <span class="padding-left20 <%=order.statusColor %>"><%=order.statusName%></span>

                </div>
                <div class="panel-body " >
                    <div style="margin-top:-10px;">
                        <table class="order_goods_table table text-center" style="width:100%">
                            <thead>
                                <tr class="text-center">
                                    <th style="width:280px;" >商品信息</th>
                                    <th class="text-center">单价</th>
                                    <th class="text-center">数量</th>
                                    <th class="text-center">小计</th>
                                    <th class="text-center">实付</th>
                                </tr>
                            </thead>
                            <tbody>
                            <% order.goods.forEach(item => { %>
                                <tr>
                                    <td class="text-left" style="padding-left:0;">
                                      <div class="vertical-top" style="display:inline-block;width:80px;border:1px solid #e3e3e3;height:80px;background:url(<%=item.imgTmb %>) no-repeat center;background-size:cover;"></div>
                                      <span class="padding-top5"><%=item.name %></span>
                                    </td>
                                    <td>￥<%=item.sellPrice %></td>
                                    <td><%= item.num %></td>
                                    <td>￥<%= formatFloat(item.sellPrice * item.num) %></td>
                                    <td>￥<%= formatFloat(item.sellPrice * item.num) %></td>
                                </tr>
                            <% }) %>
                            </tbody>
                        </table>
                    </div>

                    <div class="border-top margin-top5 text-right padding-top">
                        <% if(order.orderStatus === 20 ) { %>
                        <button id="applyBackAmt"  data-id="<%=order._id %>" <%=order.refunding===2?' disabled':''%> class="btn btn-link btn-info">
                           <%= order.refunding === 2?'退款申请中':'申请退款' %>
                        </button>
                        <% } %>
                        <% if(order.postageId) { %>
                        <button id="queryPostage"  data-id="<%=order.postageId %>" class="btn btn-primary">查看物流信息</button>
                        <% } %>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<% block('footer').append(`<script id="queryPostageTpl" type="text/template">
<div>
  <ul class="traces_ul">
  <@ Traces.forEach(function (item) { @>
  <li><@=item.AcceptStation @></li>
  <@ }) @>
</ul>
</div>
</script>`) %>
<% block('footer').append(`<script>
jQuery(function(){
  var tplComplie = _.template($('#queryPostageTpl')[0].innerHTML)
  $('#applyBackAmt').on('click', function () {
  	var $this = $(this)
    $.confirm('你确定要申请退款么？<p class="text-muted">退款到帐时间在退款申请提交后的1～3个工作日内完成，请耐心等待</p>','提示', function(res){
      if(res) {
      	$.post('/account/applyBackAmt/' + $this.data('id')).done(res => {
      	    $this.prop('disabled',true)
            $.alert('<p class="text-success">' + res.message + '</p>')
        })
      }
    })
  })
  $('#queryPostage').on('click',function () {
  	var $this = $(this)
  	$this.prop('disabled',true).text('正在查询...')
  	$.post('/queryPostage/' + $this.data('id')).done(res=> {
  		$this.prop('disabled',false).text('查看物流信息')
        BootstrapDialog.show({
          title:"物流详情",
          message: $(tplComplie(res.data.postage)),
          buttons: [{
            label: '确定',
            action: function(dialog) {
              dialog.close();
            }
          }]
        });
  	}).fail(err => {
  		$this.prop('disabled',false).text('查看物流信息')
  		console.log(err)
  	})
  })
})
</script>`) %>